<template>
  <div>
    <el-form :label-width="100">
      <el-form-item label="SPU名称">
        <span>{{ data.spuName }}</span>
      </el-form-item>

      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称" v-model="formData.skuName" />
      </el-form-item>

      <el-form-item label="价格">
        <el-input-number placeholder="价格" v-model="formData.price" />
      </el-form-item>

      <el-form-item label="重量">
        <el-input-number placeholder="重量" v-model="formData.weight" />
      </el-form-item>

      <el-form-item label="规格描述">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="规格描述"
          v-model="formData.skuDesc"
        />
      </el-form-item>

      <el-form-item label="平台属性">
        <!-- 循环 skuAttrValueList -->
        <el-form inline>
          <el-form-item
            v-for="(item, index) in skuAttrValueList"
            :key="index"
            :label="item.attrName"
            :label-width="100"
            style="margin-bottom: 10px"
          >
            <!--
              因为 select 有很多个，所以，我们不能把所有的 select 绑定到一个变量中
              但是我们又不知道具体会有多少个 select，所以也不能预知需要创建多少个
              第一个 select 的 value => attrValues[0]
              第二个 select 的 value => attrValues[1]

              attrValues[0] = 1
              attrValues[3] = 109
             -->
            <el-select v-model="attrValues[index]">
              <!--
                item.id: 属性的id
                item2.id: 值的id
               -->
              <el-option
                v-for="(item2, index2) in item.attrValueList"
                :key="index2"
                :label="item2.valueName"
                :value="`${item.id}|${item2.id}`"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="销售属性">
        <el-form inline>
          <el-form-item
            v-for="(item, index) in skuSaleAttrValueList"
            :key="index"
            :label="item.saleAttrName"
            :label-width="100"
            style="margin-bottom: 10px"
          >
            <el-select v-model="saleAttrValues[index]">
              <el-option
                v-for="(item2, index2) in item.spuSaleAttrValueList"
                :key="index2"
                :label="item2.saleAttrValueName"
                :value="`${item.id}|${item2.id}`"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="图片列表" border>
        <el-table
          ref="tableRef"
          :data="imageList"
          @select="tableSelectHandler"
          @select-all="tableSelectAllHandler"
          @selection-change="tableSelectionChangeHandler"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="图片">
            <template #="{ row }">
              <img style="width: 100px" :src="row.imgUrl" />
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="imgName"></el-table-column>
          <el-table-column label="操作">
            <template #="{ row }">
              <el-button
                v-if="row.id == isDefaultImageId"
                type="success"
                @click="setDefaultHandler(row)"
                >取消默认</el-button
              >
              <el-button v-else type="primary" @click="setDefaultHandler(row)"
                >设为默认</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveSKUInfoHandler">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "SKUForm",
});
</script>

<script lang="ts" setup>
import { ref } from "vue";
import * as attrApis from "@/api/attr";
import * as spuApis from "@/api/spu";
import * as skuApis from "@/api/sku";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { useCategorySelectorStore } from "@/stores/categorySelector";
import VIEW_TYPE from "@/views/product/spu/vueTypes";

import type { ISPU, ISPUSaleAttr, ISPUImage } from "@/api/spu";
import type { IAddSKU, ISKUImage } from "@/api/sku";
import type { IAttr } from "@/api/attr";

/**
 * props
 *  data 是必填的选项，因为sku的添加必须依赖某一个spu
 */
const props = defineProps<{
  data: ISPU;
}>();

/**
 * categorySelector仓库
 */
const { category1Id, category2Id, category3Id } = storeToRefs(
  useCategorySelectorStore()
);

/**
 * 收集数据
 */
const formData = ref<IAddSKU>({
  spuId: props.data.id,
  tmId: props.data.tmId,
  category3Id: props.data.category3Id,

  skuName: "",
  price: 0,
  weight: 0,
  skuDesc: "",

  skuAttrValueList: [],

  skuDefaultImg: "",
  skuImageList: [],
  skuSaleAttrValueList: [],
});

/**
 * 平台属性列表数据
 */
const skuAttrValueList = ref<IAttr[]>([]);

/**
 * 用户选择的平台属性
 */
const attrValues = ref<string[]>([]);

/**
 * 销售属性列表
 */
const skuSaleAttrValueList = ref<ISPUSaleAttr[]>([]);

/**
 * 用户选择的销售属性
 */
const saleAttrValues = ref<string[]>([]);

/**
 * 图片列表
 */
const imageList = ref<ISPUImage[]>([]);

/**
 * 当前为默认图片的id
 */
const isDefaultImageId = ref(0);

/**
 * 图片表格的示例对象
 */
const tableRef = ref();

/**
 * 事件
 */
const emits = defineEmits(["change-view"]);

/**
 * 请求平台属性列表数据
 */
async function getSKUAttrValueList() {
  try {
    skuAttrValueList.value = await attrApis.requestAttrInfoList(
      category1Id.value as number,
      category2Id.value as number,
      category3Id.value as number
    );
  } catch (e) {
    ElMessage.error("平台属性列表数据获取失败");
  }
}

/**
 * 请求指定的SPU下的销售属性列表
 */
async function getSPUSaleAttrList() {
  try {
    skuSaleAttrValueList.value = await spuApis.requestSPUSaleAttrList(
      props.data.id
    );
  } catch (e) {
    ElMessage.error("销售属性列表数据获取失败");
  }
}

/**
 * 请求指定的SPU下的图片列表
 */
async function getSPUImageList() {
  try {
    imageList.value = await spuApis.requestSPUImageList(props.data.id);
  } catch (e) {
    ElMessage.error("图片列表数据获取失败");
  }
}

/**
 * 当用户手动勾选数据行的 Checkbox 时触发的事件
 */
function tableSelectHandler() {
  // console.log("tableSelectHandler");
}

/**
 * 	当用户手动勾选全选 Checkbox 时触发的事件
 */
function tableSelectAllHandler() {
  // console.log("tableSelectAllHandler");
}

/**
 * 	当选择项发生变化时会触发该事件
 *
 *    selection: 当前选中的行对应的数据
 */
function tableSelectionChangeHandler(selection: ISPUImage[]) {
  // console.log("tableSelectionChangeHandler", selection);
  // 把当前 selection 的图片数据添加到 formData.value.skuImageList
  formData.value.skuImageList = selection.map((item) => {
    return {
      ...item,
      /*如果当前添加到图片的id和isDefaultImageId中只是一致的，那么表示这个图片是默认图片*/
      isDefault: item.id == isDefaultImageId.value,
    } as ISKUImage;
  });
}

/**
 * 设置为默认图片
 */
function setDefaultHandler(row: ISPUImage) {
  /**
   * 1、先把formData中isDefault的数据设置false（保证formData的图片数据都是非默认的）
   * 2、处理当前点击的图片数据
   *  2-1、判断当前图片是不是选中状态
   *  2-2、如果是默认的状态，清除当前图片的默认状态，isDefaultImageId = 0
   *  2-2、如果当前是非默认状态，就需要把当前图片设置为默认的状态
   *  2-3、如果当前图片没有被添加到 formData 中，需要先添加到 formData 中
   *  2-4、设置当前图片为默认的
   */

  // 把原来设置为默认的图片的 isDefault 设置为false
  // 找到 formData.value.skuImageList id 为 isDefaultImageId 的数据
  const isDefaultImg = formData.value.skuImageList.find(
    (item) => item.id == isDefaultImageId.value
  );
  // 先设置上一个默认的图片的 isDefault 为 false
  if (isDefaultImg) {
    isDefaultImg.isDefault = false;
  }

  // 判断当前数据的状态是默认的还是非默认的
  if (row.id === isDefaultImageId.value) {
    // 当前数据是默认的
    // console.log(123);
    isDefaultImageId.value = 0;
  } else {
    // row 的数据中没有 isDefault 属性，isDefault 是在 formData.value.skuImageList 才存在
    // 从 formData.value.skuImageList 查找到 与 row 对应的数据
    const img = formData.value.skuImageList.find((item) => item.id === row.id);
    /**
     * 这里需要处理几个逻辑
     * 1、如果img存在
     *    说明img这条数据是被选中的数据
     * 2、如果img不存在
     *    说明这个img没有被选中，
     */
    // console.log(img);

    if (img) {
      // 如果找到了，则把对应的数据的 isDefault 设置为 true
      img.isDefault = true;
      isDefaultImageId.value = img.id;
    } else {
      isDefaultImageId.value = row.id as number;
      // 如果当前没有被选中，我们调用api设置成选中的状态
      tableRef.value.toggleRowSelection(row, true);
    }
  }
}

/**
 * 提交保存
 */
async function saveSKUInfoHandler() {
  // 在提交请求之前处理 formData 的数据
  // console.log(attrValues);

  // 循环 attrValues 数组，生成 formData.value.skuAttrValueList 所需要的数据
  attrValues.value.forEach((item) => {
    // forEach 自动过滤掉了 值为 undefined 的那一项
    // console.log(item);
    const [attrId, valueId] = item.split("|");
    formData.value.skuAttrValueList.push({
      attrId: Number(attrId),
      valueId: Number(valueId),
    });
  });

  // 循环 saleAttrValues 数组，生成 formData.value.skuSaleAttrValueList 所需要的数据
  saleAttrValues.value.forEach((item) => {
    const [saleAttrId, saleAttrValueId] = item.split("|");

    formData.value.skuSaleAttrValueList.push({
      saleAttrId: Number(saleAttrId),
      saleAttrValueId: Number(saleAttrValueId),
    });
  });

  // 处理默认图片：skuDefaultImg 的值
  // 循环 formData.value.skuImageList 数组，找到 isDefault 为 true 的数据，把数据中的 imgUrl 赋值给 skuDefaultImg
  const hasDefaultImg = formData.value.skuImageList.find(
    (item) => item.isDefault
  );

  // console.log(hasDefaultImg);
  // if (hasDefaultImg) {
  //   // 存在 默认图片
  //   formData.value.skuDefaultImg = hasDefaultImg.imgUrl;
  // } else {
  //   formData.value.skuDefaultImg = "";
  // }
  formData.value.skuDefaultImg = hasDefaultImg ? hasDefaultImg.imgUrl : "";

  // console.log(formData.value);
  try {
    await skuApis.requestSaveSKUInfo(formData.value);
    ElMessage.success("保存成功");
    // 跳转到列表页面
    emits("change-view", VIEW_TYPE.LIST);
  } catch (e) {
    ElMessage.error("保存失败");
  }
}

getSKUAttrValueList();
getSPUSaleAttrList();
getSPUImageList();
</script>
